<template>
  <div class="student-report-container" v-loading="loading" element-loading-text="加载中...">
    <!-- 顶部统计卡片 -->
    <el-row :gutter="24" class="stats-row">
      <el-col :span="6">
        <div class="stat-card total-card">
          <div class="stat-icon-bg">
            <i class="el-icon-user" />
          </div>
          <div class="stat-content">
            <div class="stat-label">学生总数</div>
            <div class="stat-number">{{ statsData.totalStudents || 0 }}</div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="stat-card active-card">
          <div class="stat-icon-bg">
            <i class="el-icon-check" />
          </div>
          <div class="stat-content">
            <div class="stat-label">在读学生</div>
            <div class="stat-number">{{ statsData.activeStudents || 0 }}</div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="stat-card inactive-card">
          <div class="stat-icon-bg">
            <i class="el-icon-close" />
          </div>
          <div class="stat-content">
            <div class="stat-label">已离开</div>
            <div class="stat-number">{{ statsData.femaleStudents || 0 }}</div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="stat-card classes-card">
          <div class="stat-icon-bg">
            <i class="el-icon-school" />
          </div>
          <div class="stat-content">
            <div class="stat-label">班级总数</div>
            <div class="stat-number">{{ classes.length }}</div>
          </div>
        </div>
      </el-col>
    </el-row>

    <!-- 图表区域 -->
    <el-row :gutter="24" class="charts-row">
      <!-- 学生状态分布饼图 -->
      <el-col :span="12">
        <div class="chart-card">
          <div class="chart-header">
            <h3>学生状态分布</h3>
            <el-button
              type="text"
              size="mini"
              @click="initStatusChart"
              title="刷新图表"
            >
              <i class="el-icon-refresh"></i>
            </el-button>
          </div>
          <div class="chart-content" v-loading="chartsLoading">
            <div ref="statusChart" class="chart" />
          </div>
        </div>
      </el-col>

      <!-- 班级学生数量柱状图 -->
      <el-col :span="12">
        <div class="chart-card">
          <div class="chart-header">
            <h3>各班级学生数量</h3>
            <el-button
              type="text"
              size="mini"
              @click="initClassChart"
              title="刷新图表"
            >
              <i class="el-icon-refresh"></i>
            </el-button>
          </div>
          <div class="chart-content" v-loading="chartsLoading">
            <div ref="classChart" class="chart" />
          </div>
        </div>
      </el-col>
    </el-row>

    <!-- 第二行图表 -->
    <el-row :gutter="24" class="charts-row">
      <!-- 性别分布图 -->
      <el-col :span="12">
        <div class="chart-card">
          <div class="chart-header">
            <h3>性别分布统计</h3>
            <el-button
              type="text"
              size="mini"
              @click="initGenderChart"
              title="刷新图表"
            >
              <i class="el-icon-refresh"></i>
            </el-button>
          </div>
          <div class="chart-content gender-chart-content" v-loading="chartsLoading">
            <div ref="genderChart" class="chart gender-chart" />
            <div class="gender-stats-vertical">
              <div class="gender-item male-item">
                <div class="gender-icon-wrapper male">
                  <i class="el-icon-male" />
                </div>
                <div class="gender-info">
                  <div class="gender-label">男生</div>
                  <span class="gender-count">{{
                    statsData.maleStudents || 0
                  }}</span>
                </div>
              </div>
              <div class="gender-item female-item">
                <div class="gender-icon-wrapper female">
                  <i class="el-icon-female" />
                </div>
                <div class="gender-info">
                  <div class="gender-label">女生</div>
                  <span class="gender-count">{{
                    statsData.femaleStudents || 0
                  }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-col>

      <!-- 入学年份趋势图 -->
      <el-col :span="12">
        <div class="chart-card">
          <div class="chart-header">
            <h3>入学年份趋势</h3>
            <el-button
              type="text"
              size="mini"
              @click="initYearChart"
              title="刷新图表"
            >
              <i class="el-icon-refresh"></i>
            </el-button>
          </div>
          <div class="chart-content" v-loading="chartsLoading">
            <div ref="yearChart" class="chart" />
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
// 导入API
import { getStudentStats, getClasses } from '@/api/student'
// 需要安装和导入 ECharts
// npm install echarts
import * as echarts from 'echarts'

export default {
  name: 'StudentReport',
  data() {
    return {
      // 统计数据
      statsData: {
        totalStudents: 0,
        activeStudents: 0,
        inactiveStudents: 0,
        maleStudents: 0,
        femaleStudents: 0,
        classCounts: {},
        yearCounts: {}
      },

      // 图表实例
      statusChart: null,
      classChart: null,
      genderChart: null,
      yearChart: null,

      // 班级数据
      classes: [],

      // 加载状态
      loading: false,
      chartsLoading: false,

      // 观察器
      resizeObserver: null,
      themeObserver: null,

      // 防抖定时器
      resizeTimer: null,
      themeTimer: null
    }
  },
  computed: {
    // 图表实例集合
    chartInstances() {
      return [this.statusChart, this.classChart, this.genderChart, this.yearChart].filter(Boolean)
    },

    // 百分比计算
    activePercentage() {
      return this.statsData.totalStudents > 0
        ? Math.round(
          (this.statsData.activeStudents / this.statsData.totalStudents) * 100)
        : 0
    },
    inactivePercentage() {
      return this.statsData.totalStudents > 0
        ? Math.round((this.statsData.inactiveStudents / this.statsData.totalStudents) *
              100)
        : 0
    },
    malePercentage() {
      return this.statsData.totalStudents > 0
        ? Math.round(
          (this.statsData.maleStudents / this.statsData.totalStudents) * 100
        )
        : 0
    },
    femalePercentage() {
      return this.statsData.totalStudents > 0
        ? Math.round(
          (this.statsData.femaleStudents / this.statsData.totalStudents) * 100
        )
        : 0
    },

    // 处理后的状态数据
    processedStatusData() {
      return [
        {
          name: '在读',
          value: this.statsData.activeStudents || 0,
          itemStyle: { color: '#52c41a' }
        },
        {
          name: '已离开',
          value: this.statsData.inactiveStudents || 0,
          itemStyle: { color: '#faad14' }
        }
      ]
    },

    // 处理后的性别数据
    processedGenderData() {
      return [
        {
          name: '男生',
          value: this.statsData.maleStudents || 0,
          itemStyle: { color: '#1890ff' }
        },
        {
          name: '女生',
          value: this.statsData.femaleStudents || 0,
          itemStyle: { color: '#f759ab' }
        }
      ]
    },
    // 缓存主题状态
    isDarkTheme() {
      return document.body.classList.contains('dark-theme')
    },
    // 缓存主题颜色
    themeColors() {
      const isDark = this.isDarkTheme
      return {
        textColor: isDark ? 'rgba(255, 255, 255, 0.85)' : '#303133',
        secondaryTextColor: isDark ? 'rgba(255, 255, 255, 0.45)' : '#606266',
        splitLineColor: isDark ? 'rgba(255, 255, 255, 0.1)' : '#ebeef5'
      }
    },
    // 缓存班级数据
    processedClassData() {
      const allClasses = this.classes.map(c => ({
        id: c.id,
        name: c.name
      }))
      const classCounts = this.statsData.classCounts || {}
      return allClasses.map(cls => ({
        name: cls.name || `班级${cls.id}`,
        value: Math.round(classCounts[cls.id] || 0)
      }))
    },
    // 缓存年份数据
    processedYearData() {
      const years = Object.keys(this.statsData.yearCounts).sort()
      const counts = years.map((year) => this.statsData.yearCounts[year])
      return { years, counts }
    }
  },
  mounted() {
    this.initData()
    this.initResizeObserver()
    this.initThemeObserver()
  },
  beforeDestroy() {
    // 清理定时器
    if (this.resizeTimer) {
      clearTimeout(this.resizeTimer)
      this.resizeTimer = null
    }
    if (this.themeTimer) {
      clearTimeout(this.themeTimer)
      this.themeTimer = null
    }
    // 销毁所有图表实例
    this.chartInstances.forEach(chart => {
      if (chart) {
        chart.dispose()
      }
    })
    this.statusChart = null
    this.classChart = null
    this.genderChart = null
    this.yearChart = null
    // 移除观察器
    if (this.resizeObserver) {
      this.resizeObserver.disconnect()
      this.resizeObserver = null
    }
    if (this.themeObserver) {
      this.themeObserver.disconnect()
      this.themeObserver = null
    }
    // 移除window事件监听器
    if (this._windowResizeHandler) {
      window.removeEventListener('resize', this._windowResizeHandler)
    }
  },
  methods: {
    // 防抖工具函数
    debounce(func, wait) {
      let timeout
      return function executedFunction(...args) {
        const later = () => {
          clearTimeout(timeout)
          func(...args)
        }
        clearTimeout(timeout)
        timeout = setTimeout(later, wait)
      }
    },

    // 优化的数据初始化方法
    async initData() {
      this.loading = true
      this.chartsLoading = true
      try {
        // 获取统计数据和班级数据
        const [statsRes, classesRes] = await Promise.all([
          getStudentStats(),
          getClasses()
        ])

        this.statsData = statsRes.data.data
        this.classes = classesRes.data.data

        // 延迟初始化图表以确保DOM已更新
        this.$nextTick(() => {
          this.initCharts()
          this.chartsLoading = false
        })
      } catch (error) {
        this.$message.error('获取数据失败')
        console.error(error)
        this.chartsLoading = false
      } finally {
        this.loading = false
      }
    },

    // 初始化所有图表
    initCharts() {
      this.initStatusChart()
      this.initClassChart()
      this.initGenderChart()
      this.initYearChart()
    },

    // 初始化状态分布图表
    initStatusChart() {
      if (this.processedStatusData.every(item => item.value === 0)) {
        console.log('状态统计数据为空')
        return
      }

      if (this.statusChart) {
        this.statusChart.dispose()
      }
      this.statusChart = echarts.init(this.$refs.statusChart)
      this.updateStatusChart()
    },

    // 初始化班级分布图表
    initClassChart() {
      if (this.processedClassData.length === 0) {
        console.log('班级统计数据为空')
        return
      }

      if (this.classChart) {
        this.classChart.dispose()
      }
      this.classChart = echarts.init(this.$refs.classChart)
      this.updateClassChart()
    },

    // 初始化性别分布图表
    initGenderChart() {
      if (this.processedGenderData.every(item => item.value === 0)) {
        console.log('性别统计数据为空')
        return
      }

      if (this.genderChart) {
        this.genderChart.dispose()
      }
      this.genderChart = echarts.init(this.$refs.genderChart)
      this.updateGenderChart()
    },

    // 初始化年份趋势图表
    initYearChart() {
      const { years } = this.processedYearData
      if (years.length === 0) {
        console.log('年份统计数据为空')
        return
      }

      if (this.yearChart) {
        this.yearChart.dispose()
      }
      this.yearChart = echarts.init(this.$refs.yearChart)
      this.updateYearChart()
    },

    // 更新图表数据
    updateCharts() {
      if (this.chartsLoading) return
      this.chartsLoading = true
      this.$nextTick(() => {
        try {
          // 批量更新图表，减少重绘次数
          const updates = [
            () => this.statusChart && this.updateStatusChart(),
            () => this.classChart && this.updateClassChart(),
            () => this.genderChart && this.updateGenderChart(),
            () => this.yearChart && this.updateYearChart()
          ]
          updates.forEach(update => {
            try {
              update()
            } catch (error) {
              console.warn('图表更新失败:', error)
            }
          })
        } finally {
          this.chartsLoading = false
        }
      })
    },

    // 优化的状态分布图更新
    updateStatusChart() {
      if (!this.statusChart || this.processedStatusData.every(item => item.value === 0)) return
      const { textColor, secondaryTextColor } = this.themeColors
      const option = {
        title: {
          text: '学生总数',
          subtext: this.statsData.totalStudents.toString(),
          left: 'center',
          top: '36%',
          textStyle: {
            fontSize: 16,
            color: secondaryTextColor,
            fontWeight: 'normal'
          },
          subtextStyle: {
            fontSize: 28,
            color: textColor,
            fontWeight: '600'
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b}: {c}人 ({d}%)'
        },
        legend: {
          orient: 'horizontal',
          bottom: '0%',
          data: ['在读', '已离开'],
          itemWidth: 10,
          itemHeight: 10,
          itemGap: 30,
          textStyle: {
            color: secondaryTextColor,
            fontSize: 14
          }
        },
        series: [
          {
            name: '学生状态',
            type: 'pie',
            radius: ['55%', '75%'],
            center: ['50%', '45%'],
            avoidLabelOverlap: true,
            label: {
              show: true,
              position: 'outside',
              formatter: '{b}: {c}人 ({d}%)',
              color: secondaryTextColor,
              fontSize: 12
            },
            labelLine: {
              show: true,
              length: 15,
              length2: 15,
              lineStyle: {
                color: '#cccccc'
              }
            },
            data: this.processedStatusData
          }
        ]
      }
      this.statusChart.setOption(option)
    },

    // 优化的班级统计图更新
    updateClassChart() {
      if (!this.classChart || this.processedClassData.length === 0) return
      const { textColor, splitLineColor } = this.themeColors
      const classData = this.processedClassData

      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: '{b}: {c}人'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '15%',
          top: '10%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: classData.map(item => item.name),
          axisLabel: {
            rotate: 0,
            textStyle: { color: textColor },
            interval: 0,
            fontSize: 12
          },
          axisTick: {
            alignWithLabel: true
          }
        },
        yAxis: {
          type: 'value',
          minInterval: 1,
          axisLabel: {
            textStyle: { color: textColor },
            formatter: '{value}',
            fontSize: 12
          },
          splitLine: {
            lineStyle: {
              type: 'dashed',
              color: splitLineColor
            }
          }
        },
        series: [
          {
            data: classData.map(item => item.value),
            type: 'bar',
            barWidth: '40%',
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#1890ff' },
                { offset: 1, color: '#40a9ff' }
              ]),
              borderRadius: [4, 4, 0, 0]
            }
          }
        ]
      }
      this.classChart.setOption(option)
    },
    // 优化的性别分布图更新
    updateGenderChart() {
      if (!this.genderChart || this.processedGenderData.every(item => item.value === 0)) return
      const option = {
        tooltip: {
          trigger: 'item',
          formatter: '{b}: {c}人 ({d}%)'
        },
        series: [
          {
            name: '性别分布',
            type: 'pie',
            radius: '65%',
            center: ['50%', '50%'],
            avoidLabelOverlap: true,
            label: {
              show: false,
              position: 'outside',
              formatter: '{b}: {c}人',
              color: '#606266',
              fontSize: 12
            },
            labelLine: {
              show: false,
              length: 15,
              length2: 15,
              lineStyle: {
                color: '#cccccc'
              }
            },
            data: this.processedGenderData
          }
        ]
      }
      this.genderChart.setOption(option)
    },

    // 优化的年份趋势图更新
    updateYearChart() {
      if (!this.yearChart) return
      const { textColor, splitLineColor } = this.themeColors
      const { years, counts } = this.processedYearData
      if (years.length === 0) return

      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'line'
          },
          formatter: '{b}年: {c}人'
        },
        grid: {
          left: '10%',
          right: '10%',
          bottom: '5%',
          top: '15%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: true,
          data: years,
          axisLabel: {
            textStyle: { color: textColor },
            fontSize: 12
          },
          axisTick: {
            alignWithLabel: true
          }
        },
        yAxis: {
          type: 'value',
          minInterval: 1,
          axisLabel: {
            textStyle: { color: textColor },
            formatter: '{value}',
            fontSize: 12
          },
          splitLine: {
            lineStyle: {
              type: 'dashed',
              color: splitLineColor
            }
          }
        },
        series: [
          {
            data: counts,
            type: 'line',
            smooth: true,
            symbolSize: 0,
            lineStyle: {
              width: 3,
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 1,
                y2: 0,
                colorStops: [
                  { offset: 0, color: '#81D4FA' },
                  { offset: 1, color: '#9575CD' }
                ]
              }
            },
            areaStyle: {
              opacity: 0.3,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(129, 212, 250, 0.5)' },
                { offset: 1, color: 'rgba(149, 117, 205, 0.1)' }
              ])
            }
          }
        ]
      }
      this.yearChart.setOption(option)
    },

    // 优化的resize处理
    handleResize() {
      this.chartInstances.forEach(chart => {
        if (chart) {
          chart.resize()
        }
      })
    },

    // 初始化resize观察器
    initResizeObserver() {
      if (window.ResizeObserver) {
        this.resizeObserver = new ResizeObserver(this.debounce(this.handleResize, 100))
        this.resizeObserver.observe(this.$el)
      } else {
        // 降级到window resize事件
        this._windowResizeHandler = this.debounce(this.handleResize, 100)
        window.addEventListener('resize', this._windowResizeHandler)
      }
    },

    // 初始化主题观察器
    initThemeObserver() {
      if (window.MutationObserver) {
        this.themeObserver = new MutationObserver(this.debounce(() => {
          // 主题变化时重新初始化图表
          this.$nextTick(() => {
            this.initCharts()
          })
        }, 200))
        this.themeObserver.observe(document.documentElement, {
          attributes: true,
          attributeFilter: ['class', 'data-theme']
        })
      }
    },

    // 刷新数据
    async refreshData() {
      await this.initData()
    }
  }
}
</script>

<style scoped>
/* 基本容器样式 */
.student-report-container {
  padding: 24px;
  background-color: #f0f2f5;
  min-height: calc(100vh - 50px);
  width: 100%;
  /* 启用硬件加速 */
  transform: translateZ(0);
  will-change: auto;
}

/* 统计卡片样式 */
.stats-row {
  margin-bottom: 24px;
}

.stat-card {
  background: #fff;
  border-radius: 8px;
  padding: 24px;
  display: flex;
  align-items: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  height: 120px;
  /* 性能优化 */
  transform: translateZ(0);
  will-change: auto;
  transition: all 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-2px) translateZ(0);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.stat-icon-bg {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  margin-right: 20px;
  color: #fff;
}

.stat-card.total-card .stat-icon-bg { background-color: #1890ff; }
.stat-card.active-card .stat-icon-bg { background-color: #52c41a; }
.stat-card.inactive-card .stat-icon-bg { background-color: #faad14; }
.stat-card.classes-card .stat-icon-bg { background-color: #722ed1; }

.stat-content {
  flex: 1;
}

.stat-label {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.45);
  margin-bottom: 8px;
}

.stat-number {
  font-size: 30px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.85);
}

.stat-percent {
  font-size: 14px;
  color: #52c41a;
  margin-top: 8px;
}

/* 图表卡片样式 */
.charts-row {
  margin-bottom: 24px;
}

.chart-card {
  background: #fff;
  border-radius: 8px;
  padding: 15px 24px;
  height: 400px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  /* 性能优化 */
  transform: translateZ(0);
  will-change: auto;
}

.chart-header {
  margin: 0 0 15px 0;
  padding: 0;
  border-bottom: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chart-header h3 {
  font-size: 18px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.85);
  margin: 0;
}

.chart-header .el-button {
  padding: 4px 8px;
  color: #409eff;
}

.chart-header .el-button:hover {
  color: #66b1ff;
  background-color: #ecf5ff;
}

.chart-header .el-button i {
  font-size: 14px;
}

.chart-content {
  flex: 1;
  position: relative;
  /* 性能优化 */
  transform: translateZ(0);
  will-change: auto;
}

.chart {
  width: 100%;
  height: 100%;
  /* 性能优化 */
  transform: translateZ(0);
  will-change: auto;
}

/* 性别分布统计样式 */
.gender-chart-content {
  display: flex;
  align-items: center;
  gap: 24px;
}

.gender-chart {
  width: 55%;
}

.gender-stats-vertical {
  width: 45%;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.gender-item {
  display: flex;
  align-items: center;
  padding: 16px;
  border-radius: 8px;
  background: #f7f8fc;
  border: 1px solid #eef0f5;
}

.gender-item.male-item {
  border-left: 3px solid #1890ff;
}
.gender-item.female-item {
  border-left: 3px solid #f759ab;
}

.gender-icon-wrapper {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
  flex-shrink: 0;
  color: #fff;
  font-size: 24px;
}

.gender-icon-wrapper.male { background: #1890ff; }
.gender-icon-wrapper.female { background: #f759ab; }

.gender-info {
  flex: 1;
}

.gender-label {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.45);
  margin-bottom: 4px;
}

.gender-count {
  font-size: 24px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.85);
}
</style>

<!-- 添加全局样式，处理暗色主题 -->
<style>
/* 暗色主题样式 - 基于body.dark-theme类 */
body.dark-theme .student-report-container {
  background-color: #141414;
}

body.dark-theme .chart-card,
body.dark-theme .stat-card {
  background-color: #1f1f1f;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

body.dark-theme .chart-header h3,
body.dark-theme .stat-number,
body.dark-theme .gender-count {
  color: rgba(255, 255, 255, 0.85);
}

body.dark-theme .stat-label,
body.dark-theme .gender-label {
  color: rgba(255, 255, 255, 0.45);
}

body.dark-theme .gender-item {
  background-color: #1f1f1f;
  border-color: #303030;
}

/* 修复暗色模式下图表文字颜色 */
body.dark-theme .echarts text {
  fill: rgba(255, 255, 255, 0.85) !important;
}

/* 修复暗色模式下图表网格线颜色 */
body.dark-theme .echarts .echarts-axis-line,
body.dark-theme .echarts .echarts-grid-line {
  stroke: rgba(255, 255, 255, 0.1) !important;
}

/* 修复暗色模式下图表背景 */
body.dark-theme .echarts-tooltip {
  background-color: rgba(0, 0, 0, 0.7) !important;
  border-color: #303030 !important;
  color: rgba(255, 255, 255, 0.85) !important;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .student-report-container {
    padding: 15px;
  }
  .stat-card {
    padding: 15px;
  }
  .chart-card {
    padding: 15px;
    height: 350px;
  }
}

@media (max-width: 992px) {
  .student-report-container {
    padding: 10px;
  }
  .stat-card {
    padding: 12px;
    margin-bottom: 15px;
  }
  .stat-number {
    font-size: 28px;
  }
  .chart-card {
    padding: 12px;
    height: 320px;
    margin-bottom: 15px;
  }
}

@media (max-width: 768px) {
  .student-report-container {
    padding: 5px;
    margin: 0;
  }
  .el-row {
    margin: 0 !important;
  }
  .el-col {
    padding: 0 5px !important;
  }

  .stat-card {
    padding: 10px;
    margin-bottom: 10px;
  }
  .stat-number {
    font-size: 22px;
  }
  .stat-label {
    font-size: 12px;
  }
  .chart-card {
    padding: 10px;
    height: 280px;
    margin-bottom: 10px;
  }
  .charts-row {
    flex-direction: column;
    margin: 0 !important;
  }
  .charts-row .el-col {
    width: 100% !important;
    flex: none !important;
    max-width: 100% !important;
  }
  .gender-chart-content {
    flex-direction: column;
    align-items: center;
  }
  .gender-stats-vertical {
    margin-top: 15px;
    margin-left: 0;
  }
}

@media (max-width: 480px) {
  .student-report-container {
    padding: 2px;
  }
  .el-col {
    padding: 0 2px !important;
  }
  .stat-card {
    padding: 8px;
    margin-bottom: 8px;
  }
  .stat-number {
    font-size: 18px;
  }
  .stat-label {
    font-size: 10px;
  }
  .chart-card {
    padding: 8px;
    height: 220px;
    margin-bottom: 8px;
  }
  .gender-item {
    font-size: 11px;
  }
  .gender-count {
    font-size: 14px;
  }
}
</style>
